<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="../css/demo.css" />
    
    <title>Jslet - 导入对话框</title>
    <script type="text/javascript" data-main="../config.js" src="../lib/requirejs/require.min.js"></script>
    <script type="text/javascript">
	    require(['dialog/importdialog']);
    </script>
</head>
<body>
    <div class="demo-header">
    <h4 id="top">Jslet - 导入对话框</h4>
	</div>
	<hr />

	<div style="padding-left: 5px;margin-bottom: 10px">
	    <button class="btn btn-default btn-sm" id="btnQuery"> 查询 </button>
	    <div class="btn-group">
	    <button class="btn btn-default btn-sm" id="btnBasicImport"> 简单导入 </button>
	    <button class="btn btn-default btn-sm" id="btnFieldsImport"> 按指定字段导入 </button>
	    <button class="btn btn-default btn-sm" id="btnAdvancedImport"> 按模板导入 </button>
	    </div>
	</div>
	<div data-jslet="type: 'DBTable', dataset: 'employee', editable: true" style="margin-bottom: 10px"></div>
	<hr />
	<h4>源码</h4>
	<h5>HTML</h5>
    <pre class="prettyprint linenums"><code>
    //列表
    &lt;div data-jslet="type: 'DBTable', dataset: 'employee', editable: true" style="margin-bottom: 10px">&lt;/div>
	</code></pre>
    
	<h5>JavaScript</h5>
    <pre class="prettyprint linenums"><code>
	//datasetMetaStore定义在公共js:common/datasetmetastore.js中
	//将数据集定义信息仓库加到datasetFactory中，创建Dataset时会仓库里去定义信息
	jslet.data.datasetFactory.addMetaStore(window.datasetMetaStore);
	//通过工厂方法，可以自动创建主数据集及相关的数据集
    jslet.data.datasetFactory.createDataset('employee').done(function() {
		var dsEmployee = jslet.data.getDataset('employee');
		dsEmployee.query();
		
    	jslet.ui.install();
    });
    
    //基础导入
	$('#btnBasicImport').click(function() {
		var importDlg = new jslet.ui.ImportDialog('employee');
		importDlg.show();
	});
	
    //指定字段导入
	$('#btnFieldsImport').click(function() {
		var importDlg = new jslet.ui.ImportDialog('employee', {includeFields: ['id', 'name', 'gender', 'birthday']});
		importDlg.show();
	});
	
	//按模板导入
	$('#btnAdvancedImport').click(function() {
		var importDlg = new jslet.ui.ImportDialog('employee', {hasSchemaSection: true});
		//保存导出模板
		importDlg.onSubmitSchema(function(action, changedRecord) {
			
			if(action == 'delete') {
				sendRequest('/demo/importschema/delete', changedRecord.schema);
			} else {
				sendRequest('/demo/importschema/save', changedRecord);
			}
		});
		//查询导出模板
		importDlg.onQuerySchema(function(ck) {
			return sendRequest('/demo/importschema/query');
		});
		importDlg.show();
	});
	
	function sendRequest(url, reqData, callBack) {
		var settings = {type: 'POST', contentType: 'application/json', mimeType: 'application/json', dataType: 'json', data: reqData};
		
		var defer = jQuery.Deferred();
		jQuery.ajax(url, settings)
		.done(function(data, textStatus, jqXHR) {
			defer.resolve(data);
		});
		return defer.promise();
	}
	</code></pre>

    <script type="text/javascript">
       window.LOADER_BASE_URL = "../lib/prettify";
    </script>
    <script type="text/javascript" src="../lib/prettify/run_prettify.js"></script>
		
</body>
</html>
